<%-- 
    Document   : update_order
    Created on : Mar 27, 2013, 12:23:42 AM
    Author     : duonghung1369
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib tagdir="/WEB-INF/tags/common_admin/" prefix="common" %>
<%@taglib uri="/struts-tags" prefix="s" %>
<!DOCTYPE HTML>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Administrator Page</title>
        <link rel="stylesheet" type="text/css" href="../resource/css/admin_style.css">
        <script src="../resource/js/ajaxfunctions.js" type="text/javascript" ></script>
        <script>
            window.onload = function(){
                var parentId = '<s:property value="category.category.id" />';
                var currentCateId = '<s:property value="category.id" />';
                var cateBox = document.getElementById('update-category-listbox');
                if(cateBox){
                    var options = cateBox.getElementsByTagName('option');

                    // add new option tag in first child
                    var newOption = document.createElement('option');
                    newOption.value = -1;
                    newOption.text = "--- NONE ---";

                    var newContentHTML = newOption.outerHTML + cateBox.innerHTML;
                    cateBox.innerHTML = newContentHTML;

                    // select current parent category to display
                    for (var i = 0; i < options.length; i++) {
                        // hide option that parentId = current category id
                        if(Number(options[i].value) == Number(currentCateId)) {
                            options[i].style.display = "none";
                        }
                        
                        if(options[i].value.trim() == parentId.trim()) {
                            options[i].selected = true;
                            options[i].style.background = "green";
                        }
                    }

                    
                }
            }
        </script>
    </head>
    <body>
        <div class="admin-container">
            <common:header />
            <div class="leftColumn">
                <h2>Menu</h2>
                <div class="box sidemenu" style="height: 982px;">
                    <common:navigation />
                </div>
            </div>
            <div class="rightColumn">
                <div class="boxa round first grid">
                    <s:if test="parentCategories != null">
                        <h2>Update sub category</h2>
                    </s:if>
                    <s:else>
                        <h2>Update main category</h2>
                    </s:else>

                    <form action="../admin/submit_updated_category.html" method="POST" style="margin-top: 50px; margin-left: 50px;">
                        <table border="1">
                            <tbody>
                            <input type="hidden" name="categoryId" value="<s:property value="category.id" />" style="display: none;"/>
                            <tr>
                                <td>Id</td>
                                <td><s:property value="category.id" /></td>
                            </tr>
                            <tr>
                                <td>Name</td>
                                <td><input type="text" name="category.name" maxlength="50" title="Please fill out category name!" placeholder="Category name..." value="<s:property value="category.name" />" required/> </td>
                            </tr>
                            <tr>
                                <s:if test="parentCategories != null">
                                    <td>Parent Category</td>
                                    <td>
                                        <select id="update-category-listbox" name="parentId">
                                            <s:iterator value="parentCategories" id="cate" >
                                                <!-- Only display main category -->
                                                <s:if test="#cate.category == null">
                                                    <option value="<s:property value="id" />"><s:property value="name" /></option>
                                                </s:if>
                                            </s:iterator>
                                        </select>
                                    </td>
                                </s:if>
                            </tr>
                            <tr>
                                <td></td>
                                <td><input type="submit" name="btnUpdate" value="Update" /> <input type="button" value="Cancel" onclick="window.location = '../admin/category.html';" /></td>
                            </tr>
                            </tbody>
                        </table>
                    </form>
                </div>
            </div>
        </div>
        <div class="clear">
        </div>
        <common:footer />
    </body>
</html>
